<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 背景属性, 背景颜色: background-color  背景图片background-image: url() 
    背景图片平铺background-repeat 背景图片位置background-position: x y 背景尺寸background-size-->
    <style>
        /* 背景颜色background-color */
        /* 默认是 transparent (透明) 的. 可以通过设置颜色的方式修改 */
        body {
            background-color: #f3f3f3;
        }

        .bgc .one {
            background-color: red;
        }

        .bgc .two {
            background-color: #0f0;
        }

        .bgc .three {
            /* 背景透明 */
            background-color: transparent;
        }

        /* background-image, 比 image 更方便控制位置(图片在盒子中的位置) */
        /* url 不要遗漏, url 可以是绝对路径, 也可以是相对路径, url 上可以加引号, 也可以不加 */
        .bgi .one {
            width: 500px;
            height: 300px;
            background-image: url(./1.jpg);
            height: 300px;
        }

        /* background-repeat 背景平铺, 默认是 repeat. */
        /* repeat: 平铺 no-repeat: 不平铺 repeat-x: 水平平铺 repeat-y: 垂直平铺 */
        /* 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方 */
        .bgr .one {
            width: 500px;
            height: 300px;
            background-image: url(./1.jpg);
            height: 300px;
            background-repeat: no-repeat;
        }

        .bgr .two {
            width: 500px;
            height: 300px;
            background-image: url(./1.jpg);
            height: 300px;
            background-repeat: repeat-x;
        }

        .bgr .three {
            width: 500px;
            height: 300px;
            background-image: url(./1.jpg);
            height: 300px;
            background-repeat: repeat-y;
        }

        /* background-position 背景图片位置 */
        /* 方位名词: (top, left, right, bottom) */
        /* 精确单位: 坐标或者百分比(以左上角为原点) */
        /* 混合单位: 同时包含方位名词和精确单位 */
        /* 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效) */
        /* 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.) 
        /* 如果参数是精确值, 则的的第一个肯定是 x, 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)  */
        /* 如果参数是精确值,且只给了一个数值,则该数值一定是 x 坐标,另一个默认垂直居中.  */
        /* 如果参数是混合单位,则第一个值一定为 x,第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂 直居中) */
        .bgp .one {
            width: 500px;
            height: 300px;
            background-image: url(1.jpg);
            height: 500px;
            background-repeat: no-repeat;
            background-color: purple;
            background-position: center;
        }


        /* background-size: length|percentage|cover|contain 背景尺寸 */
        /* length: 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px */
        /* percentage: 也可以填百分比: 按照父元素的尺寸设置.  */
        /* cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 */
        /* contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */
        /* 注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的 */
        .bgs .one {
            width: 500px;
            height: 300px;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
</head>

<body>
    <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>

    <div class="bgi">
        <div class="one">背景图片</div>
    </div>

    <div class="bgr">
        <div class="one">不平铺</div>
        <div class="two">水平平铺</div>
        <div class="three">垂直平铺</div>
    </div>

    <div class="bgp">
        <div class="one">背景居中</div>
    </div>

    <div class="bgs">
        <div class="one">背景尺寸</div>
    </div>

</body>

</html>